import { Component, OnInit } from '@angular/core';
import { ArticleService } from 'src/app/service/service/article.service';
import { MainService } from 'src/app/service/service/main.service';

import { fromEvent } from 'rxjs';

interface stepObj{
task:string;
steps:number;
status:string;
}

interface article{
  article:string;
  artist:string;
  date:string;
  id:number;
  liked:number;
  title:string;
  viewed:number;
}

interface message{
  messages:string;
  creater:string;
  id:number;
}
@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.less']
})
export class MainComponent implements OnInit {

  public isSmaller:boolean=false
  public isLoad:boolean=true
  public steps:Array<stepObj>=[]
  public article:Array<article>=[]
  public message:Array<message>=[]
  public message1:Array<message>=[]
  public message2:Array<message>=[]

  public resize:any;
  constructor(
    private mainService:MainService,
    private articleService:ArticleService
  ) { }

  ngOnInit(): void {
    this.getStep()
    this.getMessage()
    this.getArticle()
    this.resize = fromEvent(window, 'resize').subscribe((event:any)=>{
      const width = event.target.innerWidth
      if(width<950){
        this.isSmaller = true
      }else{
        this.isSmaller = false
      }
    })
  }
  getStep(){
    const step = this.mainService.getStep().toPromise()
    .then((data:any) => {
      this.steps=data;
    }
    )
    .catch((err:any) => console.log(err)
    )
  }
  //-----------------------------------

  getArticle(){
    this.articleService.getArticle()
    .then((data:any) => {
      this.article=data,
      this.isLoad = false
    }
    )
    .catch((err:any)=>console.log(err)
    )   
  }
  //------------------------------------
  getMessage(){
    this.mainService.getMessage().toPromise()
    .then((data:any)=>{
      this.message = data
      this.message1 = data
      this.message2 = this.message.reverse()
    })
  }

}
